<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<%@ taglib prefix="sd" uri="/struts-dojo-tags" %>


<script type="text/javascript">

    $(document).ready(function(){

        setEmptyDates();
        initDisable();

    });
</script>

<br />
<h5>Site Equipment Selection</h5>

<s:form theme="simple" style="width: 100%;" id="siteEquipmentForm" method="main">
    <table id="pic_table" class="tableFilter">
        <tbody>

            <tr>
                <td>
                    <label>Site</label>
                </td>
                <td>
                    <s:select name="equipmentcertification.centro.id" id="siteId" value="%{equipmentcertification.centro.id}"
                              headerKey="" headerValue="Choose a Site"
                              list="sites"
                              listKey="id"
                              listValue="institucion"
                              theme = "simple"
                              onchange="sendSubmitFromSelect();"
                            >
                    </s:select>
                </td>
            </tr>
        </tbody>
    </table>

    <s:if test="!list.isEmpty()">
    <div id="table_content">
        <table>
            <thead>
            <tr>
                <th>Type</th>
                <th>Serial Number</th>
                <th>Location</th>
                <th>Expiration Date</th>
                <th>From</th>
                <th>Until</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <s:iterator value="list" var="x" status="row" >
                <s:hidden name="list[%{#row.index}].id" value="%{id}"/>
                <s:hidden name="list[%{#row.index}].equipment.id" value="%{equipment.id}"/>
                <tr>
                    <td><s:property value="equipment.equipmentType.description"/></td>
                    <td><s:property value="equipment.serialNumber"/></td>
                    <td><s:property value="equipment.location"/></td>
                    <td><s:date name="equipment.expirationDate" format="dd-MMM-yy" /></td>
                    <td>
                        <s:hidden  name="list[%{#row.index}].from" id="altfrom_%{#row.index}_" value="%{from}"/>
                        <s:textfield theme="simple" id="from_%{#row.index}_" cssClass="datepicker"/>
                    </td>
                    <td>
                        <s:hidden  name="list[%{#row.index}].until" id="altuntil_%{#row.index}_" value="%{until}"/>
                        <s:textfield theme="simple" id="until_%{#row.index}_" cssClass="datepicker"/>
                    </td>

                    <td>
                        <s:hidden id="row_%{#row.index}_"  value="%{#row.index}" ></s:hidden>
                        <s:checkbox id="check_%{#row.index}_" name="list[%{#row.index}].selected" onclick="disableFromUntil($('#row_%{#row.index}_').val())"
                                    value="%{selected}" theme="simple" cssClass="check" />
                    </td>
                </tr>
                </s:iterator>
                <tr>
                    <td colspan="7" class="centeredButtons">
                        <s:submit value="Save" id="save" action="save" theme="simple" />
                    </td>
                </tr>
            <tbody>
        </table>
    </div>
    </s:if>
</s:form>

<script type="text/javascript">
    selectItemMenu("siteEquipmentSelection");

    function sendSubmitFromSelect(){
        if( $("#siteId").val().trim() != ""){
            $('#siteEquipmentForm').submit();
        }
    }

    function init(){
    }

    window.onload=init;

    function disableFromUntil(row){
        var id = "#check_" + row + "_";
        var from = "#from_" + row + "_";
        var until = "#until_" + row + "_";
        if($(id).is(':checked') ){
            $(from).prop('disabled', false);
            $(until).prop('disabled', false);
        }     else{
            $(from).prop('disabled', true);
            $(until).prop('disabled', true);
        }
    }

    function initDisable(){

        $(".check").each(function(i,v){

            var from = "#from_" + i + "_";
            var until = "#until_" + i + "_";
            if($(v).is(':checked') ){
                $(from).prop('disabled', false);
                $(until).prop('disabled', false);
            }     else{
                $(from).prop('disabled', true);
                $(until).prop('disabled', true);
            }
        });
    }


</script>